<template>
  <div class="app-container">

    <el-card class="box-card">
      <h3>问卷介绍</h3>
      <el-form ref="questDetail" :rules="rules" :model="questDetail" label-width="150px">
        <el-form-item label="问卷ID" prop="id">
          <el-input v-model="questDetail.id" disabled />
        </el-form-item>
        <el-form-item label="问卷名称" prop="name">
          <el-input v-model="questDetail.name" />
        </el-form-item>
        <el-form-item label="问卷简介">
          <el-input v-model="questDetail.remake" />
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <h3>问卷问题</h3>
      <el-table :data="questDetail.questListVo" style="width: 100%" row-key="id" border>
        <el-table-column align="center" prop="id" label="ID" width="50" />
        <el-table-column align="center" label="类型" width="80">
          <template slot-scope="scope">
            <el-tag>{{ listType[scope.row.type - 1] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" />
        <el-table-column align="center" label="答案" width="80">
          <template slot-scope="scope">
            <el-dialog :visible.sync="detailDialogVisible" :title="'问题：'+listAnswer.name" width="40%">
              <el-form ref="listAnswer" :model="listAnswer" label-width="100px" class="demo-dynamic">
                <el-form-item
                  v-for="(questAnswer, index) in listAnswer.questAnswers"
                  :key="questAnswer.id"
                  :label="'答案' + answerNum[index]"
                  :prop="'questAnswers.' + index + '.name'"
                  :rules="{required: true, message: '问题不能为空', trigger: 'blur'}"
                >
                  <el-row :gutter="20">
                    <el-col :span="20"><div class="grid-content bg-purple"><el-input v-model="questAnswer.name" /></div></el-col>
                    <el-col :span="2"><div class="grid-content bg-purple"><el-button @click.prevent="removeDomain(questAnswer)">删除</el-button></div></el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('listAnswer')">提交</el-button>
                  <el-button @click="addAnswer">新增答案</el-button>
                  <el-button @click="resetForm('listAnswer')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
            <el-button v-if="scope.row.type!=3" type="primary" size="mini" @click="listDateil(scope.row)">查看</el-button>
            <el-tag v-else>用户自填</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleEdit">更新问卷</el-button>
    </div>

  </div>
</template>

<style>
.el-card {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.op-container {
  display: flex;
  justify-content: center;
}
.demo-dynamic {
  width: 80%;
}
</style>

<script>
import { detailQuest, editGoods } from '@/api/goods'
import { MessageBox } from 'element-ui'
import { getToken } from '@/utils/auth'

export default {
  name: 'GoodsEdit',
  data() {
    return {
      questDetail: '',
      listAnswer: '',
      listType: ['单选', '多选', '问答题'],
      answerNum: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      detailDialogVisible: false,
      rules: {
        name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    },
    attributesData() {
      var attributesData = []
      for (var i = 0; i < this.attributes.length; i++) {
        if (this.attributes[i].deleted) {
          continue
        }
        attributesData.push(this.attributes[i])
      }
      return attributesData
    }
  },
  created() {
    this.init()
  },
  methods: {
    init: function() {
      console.log(this.$route)
      if (this.$route.query.id == null) {
        return
      }

      const questId = this.$route.query.id
      detailQuest({ id: questId }).then(response => {
        this.questDetail = response.data.data
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      var index = this.listAnswer.questAnswers.indexOf(item)
      if (index !== -1) {
        this.listAnswer.questAnswers.splice(index, 1)
      }
    },
    addAnswer() {
      this.listAnswer.questAnswers.push({
        value: '',
        key: Date.now()
      })
    },
    listDateil: function(row) {
      console.log(row)
      this.listAnswer = row
      this.detailDialogVisible = true
    },
    handleCancel: function() {
      this.$router.push({ path: '/goods/list' })
    },
    handleEdit: function() {
      const finalGoods = {
        goods: this.goods,
        specifications: this.specifications,
        products: this.products,
        attributes: this.attributes
      }
      editGoods(finalGoods)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '创建成功'
          })
          this.$router.push({ path: '/goods/list' })
        })
        .catch(response => {
          MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
            confirmButtonText: '确定',
            type: 'error'
          })
        })
    }
  }
}
</script>
